import React, { Component } from 'react'

class App extends Component {
  // 它的执行快于构造
  // state = {
  //   todos: []
  // }

  // 如果初始化时调用成员方法，则一定要用构造函数
  constructor(props) {
    super(props)
    this.state = {
      todos: this.getTodos()
    }
  }

  onEnter = (e) => {
    if ('Enter' == e.key) {
      let value = e.target.value.trim()
      e.target.value = ''
      // 修改数据的同时让视图更新
      // this.setState(
      //   (state) => ({
      //     // 给数组中追加数据
      //     todos: [...state.todos, { id: Date.now(), value }]
      //   }),
      //   () => {
      //     this.setStore(this.state.todos)
      //   }
      // )
      this.setState(
        (state) => ({
          // 给数组中追加数据
          todos: [...state.todos, { id: Date.now(), value }]
        }),
        this.setStore
      )
    }
  }

  delTodo = (id) => () => {
    // this.setState(
    //   (state) => ({
    //     todos: state.todos.filter((item) => item.id != id)
    //   }),
    //   () => {
    //     this.setStore(this.state.todos)
    //   }
    // )
    this.setState(
      (state) => ({
        todos: state.todos.filter((item) => item.id != id)
      }),
      this.setStore
    )
  }

  // setStore = (todos) => {
  //   window.sessionStorage.setItem('todos', JSON.stringify(todos))
  // }
  setStore = () => {
    window.sessionStorage.setItem('todos', JSON.stringify(this.state.todos))
  }
  getTodos = () => {
    return window.sessionStorage.getItem('todos')
      ? JSON.parse(window.sessionStorage.getItem('todos'))
      : []
  }

  render() {
    const { todos } = this.state
    return (
      <div>
        <div>
          <input
            type="text"
            placeholder="请输入任务信息"
            onKeyUp={this.onEnter}
          />
        </div>
        <hr />
        <ul>
          {todos.map((item) => (
            <li key={item.id}>
              <span>{item.value}</span>
              <button onClick={this.delTodo(item.id)}>删除</button>
            </li>
          ))}
        </ul>
      </div>
    )
  }
}

export default App
